<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view :class="['wrap',{'darksss':theme=='dark'}]">
			
			<!-- 修改样式 -->
			
				<u-table border-color="#22253c00" bg-color="#22253c00" align="left" padding="14rpx 0" v-for="(item,index) in dataList">
					<view :class="['juzonucom','tool-card',{'darksss':theme=='dark'}]">
						
						<view :class="['wrap','juzonucg',{'darksss':theme=='dark'}]">
							{{coin.name}} {{$t('bico.W295')}}
						</view>
						
						<u-line color="#5559691f"></u-line>
						<u-gap height="20" bg-color=""></u-gap>
						<u-tr>
							<u-td>{{$t('bico.W296')}}</u-td><u-td class="juzonuc">{{zdStatus[item.result]}}</u-td>
								<u-td class="juzonup">
									<image v-if="item.result==1" style="width:25px;height:25px" src="@/static/zhang1.png"/>
									<image v-if="item.result==2" style="width:25px;height:25px" src="@/static/die1.png"/>
									<image v-if="item.result==3" style="width:25px;height:25px" src="@/static/ping1.png"/>
								</u-td>
						</u-tr>
						
						<u-tr>
							<u-td>{{$t('bico.W297')}}</u-td><u-td class="juzonuc">{{coin.openTimeGap}}S</u-td><u-td class="juzon">{{$t('bico.W299')}}</u-td>
						</u-tr>

						<u-tr>
							<u-td>{{$t('bico.W298')}}</u-td><u-td class="juzonuc">{{$t('bico.W301')}} {{item.optionNo}} {{$t('bico.W302')}}</u-td><u-td class="juzon">{{$t('bico.W300')}}</u-td>
						</u-tr>
					</view>
					
					<u-gap height="20" bg-color=""></u-gap>
				</u-table>
			<!-- 修改样式 -->

			<u-gap height="40" bg-color=""></u-gap>

		</view>
	</view>
</template>

<script>
	import {domain} from '@/common/domain.js'
	import {mapState,mapActions,mapGetters} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {contractOptionHistory,contractOptionCoinInfo} from '../../common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'//加入全局下拉刷新
	export default{
		mixins:[myMixins],
		data() {
			return {
				dataList:[],
				zdStatus: {
					0: this.$t('bico.W179'),
					1: this.$t('bico.W180'),
					2: this.$t('bico.W181'),
					3: this.$t('bico.W182'),
					4: this.$t('bico.W183'),
				},
				currentCoinSymbol: "BTC/USDT",
				coin:{},
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title:this.$t('bico.W303'),
			})
			if(option.symbol){
				this.currentCoinSymbol = option.symbol
			}
			
			this.$utils.setTheme(this.theme);
			this.getName()
			this.getData()
		},
		methods: {
			getData(){
				var that = this
				that.$utils.initDataToken({
					url: contractOptionHistory,
					type: 'post',
					data: {
				
						symbol: that.currentCoinSymbol,
						count: '40',
					}
				}, res => {
					that.dataList = res.records
				});
			},
			getName(){
				var that = this
				that.$utils.initDataToken({
					url: contractOptionCoinInfo,
					type: 'post',
					data: {
				
						symbol: that.currentCoinSymbol,
						
					}
				}, res => {
					this.coin=res.data
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
		
	}
	.container {
		width: 100%;
		height: 100%;
		.clou {
		    font-size: 12px;
		    font-weight: 400;
		}
		
		
		.wrap {
				padding: 24rpx;
			}
			
			
		
			.u-row {
				margin: 40rpx 0;
			}
		
			.demo-layout {
				height: 80rpx;
				border-radius: 8rpx;
			}
		
			.bg-purple {
				background: #d3dce6;
			}
		
			.bg-purple-light {
				background: #e5e9f2;
			}
		
			.bg-purple-dark {
				background: #99a9bf;
			}
			.top1 {
				font-size: 3.4vw;
				font-weight: 700;
				position: relative;
				left: 0vw;
			}
			.top2 {
				font-size: 3.4vw;
				font-weight: 700;
				position: relative;
				left: 7vw;
			}
			.top3 {
				font-size: 3.4vw;
				font-weight: 700;
				position: relative;
				left: 12vw;
			}
			.top4 {
				position: relative;
				left: 0vw;
				position: relative;
				border: 0;
				display: inline-flex;
				overflow: visible;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				
				z-index: 1;
				box-sizing: border-box;
				transition: all 0.15s;
				font-size: 14px;
			}
			.top5 {
				position: relative;
				left: 5vw;
				position: relative;
				border: 0;
				display: inline-flex;
				overflow: visible;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				
				z-index: 1;
				box-sizing: border-box;
				transition: all 0.15s;
				font-size: 14px;
			}
			.clou {
				
				font-size: 14px;
			}
			
			.juzon {
				text-align: right!important;
			}
			.juzonuc {
				
				position: relative;
				top: 0vw;
				left: 7vw;
			}
			.juzonucg {
				text-align: left;
				font-size: 14px;
				padding: 10px 0px;
				font-weight: 700;
			}
			.juzonucom {
				border: 0.5px solid #7079ab24;
				border-radius: 8px;
				padding: 10px 4px;
			}
			.juzonup {
				text-align: right!important;
				position: relative;
				top: -2vw;
				left: 22vw;
			}
			.tool-card {
				background-color: #ffffff;
			}
			
	}

</style>
